<template>
  <div>
    <el-button type="primary" @click="incrementAccount">新增账户</el-button>

    <el-table :data="tableData" style="width: 100%" class="mt-3">
      <el-table-column prop="address" label="名称" />
      <el-table-column prop="address" label="登陆账号" />
      <el-table-column prop="address" label="备注" />
      <el-table-column prop="address" label="创建时间" />
      <el-table-column prop="" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="modifyItem(scope.row.id)"
            >修改</el-button
          >
          <el-button type="danger" @click="removeAccount(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="mt-3 flex justify-center">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog v-model="accountShow" title="新增/修改账号" width="50%" center>
      <el-form
        ref="ruleFormRef"
        :model="accountData"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
        scroll-to-error
      >
        <el-form-item label="账号名称" prop="name">
          <el-input v-model="accountData.name" placeholder="请输入账号名称" />
        </el-form-item>
        <el-form-item label="登陆账号" prop="name">
          <el-input v-model="accountData.name" placeholder="请输入登陆账号" />
        </el-form-item>
        <el-form-item label="登陆密码" prop="name">
          <el-input v-model="accountData.name" placeholder="请输入登录密码" />
        </el-form-item>
        <el-form-item label="账号备注" prop="name">
          <el-input
            v-model="accountData.name"
            style="width: 100%"
            :autosize="{ minRows: 4, maxRows: 6 }"
            type="textarea"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="saveAccount">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { Action } from "element-plus";
import {
  accountList,
  incrementAccountItem,
  modifyAccount,
  removeAccountItem,
  accountDetail
} from "@/api/account";

const rules = reactive<any>([]);
const ruleFormRef = ref(); // 表单 ref
const accountData = reactive<any>({});
const accountShow = ref<boolean>(false);
const tableData = reactive([
  {
    id: 10
  }
]);
const total = ref(0); // 总数量
const currentPage = ref(1); // 页数
const pageSize = ref(10); // 每页数量

// 页数改变
const handleCurrentChange = (page: number) => {
  console.log(page);
};
// 数量改变
const handleSizeChange = (size: number) => {
  console.log(size);
};
// 点击保存账户
const saveAccount = () => {
  ruleFormRef.value.validate((result: boolean) => {
    if (result) {
      incrementAccountItem(accountData).then(res => {
        console.log(res);
        if (res.code != 200) return;
        ElMessage({
          message: "保存成功",
          type: "success"
        });
        accountShow.value = false;
        ruleFormRef.value.resetFields();
      });
    }
  });
};
// 点击新增账户
const incrementAccount = () => {
  accountShow.value = true;
};
// 点击删除账号
const removeAccount = (id: string | number) => {
  ElMessageBox.alert("确认删除此账号吗?", "提示", {
    confirmButtonText: "确认",
    showCancelButton: true,
    cancelButtonText: "取消",
    callback: (action: Action) => {
      if (action === "confirm") {
        removeAccountItem(id).then(res => {
          if (res.code != 200) return;
          ElMessage({
            message: "删除成功",
            type: "success"
          });
          // getData();
        });
      }
    }
  });
};
// 点击修改账号
const modifyItem = (id: string | number) => {
  accountDetail(id).then(res => {
    console.log(res);
    if (res.code != 200) return;
    console.log(res.data);
    // Object.assign(accountData, res.data);
    accountShow.value = true;
  });
};
// 获取列表数据
const getData = () => {
  accountList(currentPage.value, pageSize.value).then(res => {
    console.log(res);
  });
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped></style>
